<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--优先使用 IE 最新版本和 Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--360 使用Google Chrome Frame-->
    <meta name="renderer" content="webkit">
    <!--百度禁止转码-->
    <!--<meta http-equiv="Cache-Control" content="no-siteapp" />-->
    <!--页面关键词 keywords-->
    <meta name="keywords" content="主页 设置">
    <!--关闭chrome浏览器下翻译插件-->
    <meta name="google" value="notranslate"/>
    <!--为移动设备添加 viewport-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 浏览网站时的小图标 -->
    <link rel="shortcut icon" type="image/x-icon" href="img/setting.png" media="screen"/>


    <title>导航页设置</title>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css"
          rel="stylesheet">

    <script src="js/util.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>

    <style>
        h6, p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .main {
            padding: 0 5px;
        }

        .navbar-dark .navbar-brand {
            color: #c2c2c2;
        }

        .navbar-brand {
            font-size: 2rem;
        }

        .navitem {
            font-size: 1rem;
            margin-right: 0px;
        }

        .config {
            display: none;
        }

        #searchengines {
            display: inline;
            width: 150px;
        }

        body {
            padding-right: 0 !important;
        }
    </style>
</head>
<body>


<!-- 登陆/注册 0-->
<div class="modal fade" id="logindiv" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modelTitleId">登录&nbsp;&nbsp;</h5>
                <mark>
                    <small>tips：账号不存在会自动注册哦</small>
                </mark>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="name">用户名:</label>
                    <input type="text" spellcheck="false" class="form-control" id="name" placeholder="请输入登录名" required autofocus>
                </div>
                <div class="form-group">
                    <label for="pwd">密码:</label>
                    <input type="password" spellcheck="false" class="form-control" id="pwd" placeholder="请输入密码" required>
                </div>
            </div>
            <div class="modal-footer">
                <div style="width:100%">
                    <button id="submit" class="btn btn-primary btn-block">登陆</button>
                    <button type="button" class="btn btn-secondary btn-block" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 登陆/注册 1-->

<div class="container">

    <!-- 导航栏 0-->
    <nav class="navbar bg-dark navbar-dark" style="margin-bottom: 5px;">
        <div class="row">
            <!--<a class="navbar-brand nav-link" href="javascript:void(0);">设置</a>-->

            <a class="navbar-brand nav-link navitem" href="javascript:void(0);" id="addIndex">新增导航</a>

            <a class="navbar-brand nav-link navitem" href="#list" data-toggle="collapse"
               id="editIndex">修改导航</a>

            <a class="navbar-brand nav-link navitem" href="javascript:void(0);" id="config">全局配置</a>

            <a class="navbar-brand nav-link navitem" href="javascript:void(0);" data-toggle="modal"
               data-target="#logindiv">登陆/注册</a>
        </div>
    </nav>
    <!-- 导航栏 1-->

    <!-- 全局配置  0-->
    <div class="config">
        <div class="form-group">
            <label for="searchengines">搜索引擎:</label>&nbsp;&nbsp;&nbsp;&nbsp;
            <select class="form-control" id="searchengines">
                <option value="https://www.baidu.com/s?wd=">百度</option>
                <option value="https://www.google.com/search?q=">Google</option>
                <option value="http://www.bing.com/search?q=">必应</option>
                <option value="http://www.so.com/s?q=">360搜索</option>
                <option value="http://www.sogou.com/sogou?query=">搜狗搜索</option>
                <option value="https://quark.sm.cn/s?q=">夸克AI搜索</option>
            </select>
        </div>
        <div class="form-group">
            <label for="logoshow">Logo展示开关:</label>&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="logoshow">
        </div>
        <div class="form-group">
            <label for="weatherswitch">天气开关:</label>&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="weatherswitch">&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" spellcheck="false" class="form-control" style="width: 100px;display: inline;" id="weathercity"
                   placeholder="所在城市">
        </div>
        <div class="form-group">
            <label for="searchinputshow">搜索框展示古诗词开关:</label>&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="searchinputshow">
        </div>
        <div class="form-group">
            <label>导航页背景:</label>&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="backgroundimgshow">&nbsp;&nbsp;&nbsp;&nbsp;
            <label for="backgroundimg">
                <img id="backgroundimgurl"
                     src=""
                     style="width: 100px;height: 150px;"/>
                <!--<span>点击更换</span>-->
            </label>
            <input hidden type="file" id="backgroundimg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>
        </div>

        <button id="editconfig" class="btn btn-primary btn-block">修改</button>

    </div>
    <!-- 全局配置 1-->

    <!-- 修改导航  0-->
    <div id="list" class="collapse">
        <ul class="list-inline" style="padding: 0 5px;">
            <!--<li class="list-inline-item"><a href="#" class="btn btn-link">所有</a></li>-->
        </ul>
    </div>
    <!-- 修改导航 1-->


    <div class="index">
        <!--<form>-->
        <div class="form-group">
            <label for="menuname">网址名称:</label>
            <input type="text" spellcheck="false" class="form-control" id="menuname" placeholder="请输入网址名称" required autofocus>
        </div>
        <div class="form-group">
            <label for="menuurl">网址链接:</label>
            <input type="text" spellcheck="false" class="form-control" id="menuurl" placeholder="请输入网址链接" required>
        </div>
        <div class="form-group">
            <label>图标(
                <mark>tips：建议使用 <a href="https://www.iconfont.cn/" target="_blank">IconFont</a> 该网站下载图标，图标大小不能超过64kb哦):
                </mark>
            </label>
            <label for="menuimg">
                <img id="menuimgurl"
                     src=""
                     style="width: 50px;height: 50px;"/>
                <!--<span>点击更换</span>-->
            </label>
            <input hidden type="file" id="menuimg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>
        </div>
        <div class="form-group">
            <label for="sort">排序:</label>
            <input type="text" spellcheck="false" class="form-control" id="sort" placeholder="请输入排序" required>
        </div>
        <button id="confirm" class="btn btn-primary btn-block" btntype="0">新增</button>
        <button style="display: none;" id="delIndex" class="btn btn-secondary btn-block">删除</button>
    </div>

    <!--</form>-->
</div>


<!-- tips 0 -->
<div class="modal fade" id="tips" style="margin-top: 100px;" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm btn-block" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- tips 1 -->

<!-- loading 0-->
<div class="modal" id="loading" data-backdrop="static" data-keyboard="false"
     style="padding: 0px;margin:0px auto; width: 50%">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img src="./img/loading.gif" width="100%" height="100%" alt="loading">
            </div>
        </div>
    </div>
</div>
<!-- loading 1-->


<script src="js/setting.js"></script>
</body>
</html>